<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="项目名称：">
                        <Input type="text" v-model="form1.envName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属单位：">
                        <Input type="text" v-model="form1.orgName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset" style="margin-left: 2px">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :loading="loading" :height="tableHeight" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable" size="small">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal :transfer=false v-model="model1" :width=1000 :title="add?'环保设备设施新增':'环保设备设施修改'"
               @on-cancel="onCancel">
            <div>
                <Form style="margin-left: 10px" ref='InputData' :model="InputData" :rules="ruleCustom"
                      label-position="top">
                    <Row style="line-height: 28px;">
                        <Row>
                            <Col span='5' >
                                <FormItem label='项目名称：' prop="envName">
                                    <Input v-model="InputData.envName"/>
                                </FormItem>
                            </Col>
                            <Col span='5' offset="1">
                                <FormItem label='所属单位：' prop="belongOrgId">
                                    <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                                                 :currentOrgId="InputData.belongOrgId"
                                                 :currentOrgName="InputData.orgName"
                                                 :orgTree="true"></cascaderDom>
                                </FormItem>
                            </Col>

                            <Col span='5' offset="1">
                                <FormItem label='污水处理站数量：' prop="sewageDisposalNum">
                                    <InputNumber  :min="0" v-model="InputData.sewageDisposalNum" style="width: 100%;"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span='5' offset="1">
                                <FormItem label='污水处理站采取工艺：' prop="sewageDisposalName">
                                    <Input  v-model="InputData.sewageDisposalName" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span='5' >
                                <FormItem label='隔油池数量：' prop="oilSeparatorNum">
                                    <InputNumber  :min="0" v-model="InputData.oilSeparatorNum" style="width: 100%;"></InputNumber>
                                </FormItem>
                            </Col>

                            <Col span='5' offset="1">
                                <FormItem label='隔油池规格型号：' prop="oilSeparatorName">
                                    <Input  v-model="InputData.oilSeparatorName" />
                                </FormItem>
                            </Col>
                            <Col span='5' offset="1">
                                <FormItem label='化粪池数量：' prop="septicTankNum">
                                    <InputNumber  :min="0" v-model="InputData.septicTankNum" style="width: 100%;"></InputNumber>
                                </FormItem>
                            </Col>

                            <Col span='5' offset="1">
                                <FormItem label='化粪池型号：' prop="septicTankName">
                                    <Input v-model="InputData.septicTankName" />
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span='5' >
                                <FormItem label='油烟净化器数量：' prop="lampblackJNum">
                                    <InputNumber  :min="0" v-model="InputData.lampblackJNum" style="width: 100%;"></InputNumber>
                                </FormItem>
                            </Col>

                            <Col span='5' offset="1">
                                <FormItem label='油烟净化器型号：' prop="lampblackJName">
                                    <Input  v-model="InputData.lampblackJName" />
                                </FormItem>
                            </Col>


                            <Col span='5' offset="1">
                                <FormItem label='是否满足国家标准：' prop="nationalStandard">
                                    <Select v-model="InputData.nationalStandard" style="width:100%">
                                        <Option  value="0" >是</Option>
                                        <Option  value="1" >否</Option>
                                    </Select>
                                </FormItem>
                            </Col>

                            <Col span='5' offset="1">

                            </Col>
                        </Row>
                        <Col span='23' >
                            <FormItem label='改造计划，计划投资金额：' >
                                <Input v-model="InputData.renovationPlan" type="textarea" :rows="5" :autosize="{maxRows:5,minRows: 5}" />
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' :disabled="buttonLoading" @click="submit('InputData')">确定</Button>
                <Button class='ivu-btn-cancel' @click="onCancel">取消</Button>
            </div>
        </Modal>


        <Modal :transfer=false v-model="model3" :width=700 title="环保设备设施详情"
               @on-cancel="onCancel">
            <Form style="margin-left: 10px" :model="InputData" label-position="top">
                <Row style="line-height: 42px;">
                    <Col span='11'>
                        <span>项目名称：{{InputData.envName}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>所属单位：{{InputData.orgName}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>污水处理站数量：{{InputData.sewageDisposalNum}}</span>
                    </Col>
                    <Col span='11'  offset="1">
                        <span>污水处理站采取工艺：{{InputData.sewageDisposalName}}</span>
                    </Col>

                </Row>
                <Row  style="line-height: 42px;">

                    <Col span='11' >
                        <span>隔油池数量：{{InputData.oilSeparatorNum}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>隔油池规格型号：{{InputData.oilSeparatorName}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>化粪池数量：{{InputData.septicTankNum}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>化粪池型号：{{InputData.septicTankName}}</span>
                    </Col>
                </Row>
                <Row  style="line-height: 42px;">
                    <Col span='11'>
                        <span>油烟净化器数量：{{InputData.lampblackJNum}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>油烟净化器型号：{{InputData.lampblackJName}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>是否满足国家标准：{{InputData.nationalStandard == '0'?'是':'否'}}</span>
                    </Col>
                    <Col span='11' offset="1">

                    </Col>
                </Row>
                <Row  style="line-height: 42px;">
                    <Col span='23'>
                        <span>改造计划，计划投资金额：{{InputData.renovationPlan}}</span>
                    </Col>

                </Row>


            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage} from '../../../common/cacheUtils.js';
    import cascaderDom from '../../../components/cascader-dom.vue';


    export default {
        name: "interestedPartiesSecurityProtocol",
        components: {
            cascaderDom
        },
        data() {
            return {
                tableHeight: '',loading: false,
                form1: {
                    agreementName: '',
                    contractorName: '',
                },
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable: [],
                ruleCustom: {
                    envName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blue'
                    }],
                    belongOrgId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.belongOrgId == null || this.InputData.belongOrgId == '' || this.InputData.belongOrgId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    sewageDisposalNum: [{
                        validator: (rule, value, callback) => {
                            if(!(/^\d+$/.test(value))){
                                callback(' ');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    sewageDisposalName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    oilSeparatorNum: [{
                        validator: (rule, value, callback) => {
                            if(!(/^\d+$/.test(value))){
                                callback(' ');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],

                    oilSeparatorName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],

                    septicTankNum: [{
                        validator: (rule, value, callback) => {
                            if(!(/^\d+$/.test(value))){
                                callback(' ');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],

                    septicTankName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    lampblackJNum: [{
                        validator: (rule, value, callback) => {
                            if(!(/^\d+$/.test(value))){
                                callback(' ');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    lampblackJName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    nationalStandard: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],


                },
                columns1: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 100,
                        align: 'center',
                    }, {
                        width: 200,
                        minWidth: 200,
                        title: '项目名称',
                        align: 'center',
                        key: 'envName',
                    },
                    {
                        width: 200,
                        title: '所属单位',
                        align: 'center',
                        key: 'orgName',
                    },
                    {
                        width: 200,
                        minWidth: 200,
                        title: '污水处理站数量',
                        align: 'center',
                        key: 'sewageDisposalNum',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '污水处理站采取工艺',
                        align: 'center',
                        key: 'sewageDisposalName',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '隔油池数量',
                        align: 'center',
                        key: 'oilSeparatorNum',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '隔油池规格型号',
                        align: 'center',
                        key: 'oilSeparatorName',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '化粪池数量',
                        align: 'center',
                        key: 'septicTankNum',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '化粪池型号',
                        align: 'center',
                        key: 'septicTankName',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '油烟净化器数量',
                        align: 'center',
                        key: 'lampblackJNum',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '油烟净化器型号',
                        align: 'center',
                        key: 'lampblackJName',
                    },
                    {
                        width: 200,
                        minWidth: 150,
                        title: '是否满足国家标准',
                        align: 'center',
                        key: 'nationalStandard',
                        render: (h, params) => {
                            return h('span', params.row.nationalStandard === '0'?'是':'否')
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            this.model3 = true;
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            this.model1 = true;
                                            this.add = false;
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                add: false,
                model1: false,
                model3: false,
                contractTermDate1:'',
                evaluationPeriodDate1:'',
                evaluationPeriodDate:[null,null],
                fileUrl: Api.interestedPartiesUserFile,
                contractTermDate: [null, null],
                InputData: {},
                buttonLoading: false,
                uploadList: [],

                pageModel2: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                    contractorName: ''
                },
                contractor: [],
                columns2: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 100,
                        align: 'center',
                    },
                    {
                        minWidth: 150,
                        title: '企业名称',
                        align: 'center',
                        key: 'contractorName',
                    },
                    {
                        minWidth: 150,
                        title: '企业性质',
                        align: 'center',
                        key: 'propertyName',
                    },
                    {
                        minWidth: 150,
                        title: '法定代表人',
                        align: 'center',
                        key: 'legalPerson',
                    },
                    {
                        minWidth: 150,
                        title: '注册资本',
                        align: 'center',
                        key: 'capital',
                    },
                    {
                        minWidth: 150,
                        title: '统一社会信用代码',
                        align: 'center',
                        key: 'unifyCode',
                    },
                ],
                model2: false,
                // InputData1: {},
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query()
        },
        methods: {
            setOrgId(data) {
                this.InputData.belongOrgId = data[data.length - 1];
            },
            setOrgName(data) {
                this.InputData.orgName = data;
            },

            // baocun() {
            //     this.InputData.contractorName = this.InputData1.contractorName
            //     this.InputData.contractorId = this.InputData1.contractorId
            //     this.model2 = false
            // },
            danxuan(row, index) {
                this.InputData.contractorId = row.contractorId
                this.InputData.contractorName = row.contractorName
                this.model2 = false
                this.model1 = true
            },

            selectContractor() {
                this.model2 = true
                this.contractor = []
                let data = {
                    startPage: this.pageModel2.currentPage,
                    size: this.pageModel2.pageSize,
                    contractorName: this.pageModel2.contractorName
                }
                data = Object.assign(data);
                let url = Api.interestedPartiesAccountList
                this.$http.get(url, {params: data}).then((res) => {
                    console.log(res.data);
                    this.contractor = res.data.data.data;
                    this.pageModel2.total = res.data.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },


            downloadFile(perfId, file) {
                let url = this.fileUrl + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    console.log(res)
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(id) {
                console.log(id)
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.getFiles()
                })
            },
            beforeUpload(file) {
                console.log(this.uploadList)
                let formData = new FormData();
                formData.append("files", file); // 文件对象
                let url = this.fileUrl + '/' + this.InputData.perfId + '/files/agreementFile'
                this.$http.post(url, formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.info("文件上传成功")
                        this.getFiles();
                    }
                })
                return false
            },
            getFiles() {
                let url = this.fileUrl + '/' + this.InputData.perfId + '/files/agreementFile'
                this.$http.get(url).then((res) => {
                    if (res.data.result == "success") {
                        console.log(res.data)
                        this.uploadList = res.data.data
                    }
                })
            },

            onCancel() {
                this.contractTermDate = [null, null]
                this.evaluationPeriodDate = [null, null]
                this.InputData = {}
                this.model1 = false
                this.model3 = false
                this.uploadList = []
                this.query()
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true
                        this.InputData.contractTermStart=this.contractTermDate[0]
                        this.InputData.contractTermEnd=this.contractTermDate[1]
                        this.InputData.evaluationPeriodStart=this.evaluationPeriodDate[0]
                        this.InputData.evaluationPeriodEnd=this.evaluationPeriodDate[1]
                        if (this.add) {
                            let url = Api.saveEnvProFacilities
                            this.InputData.bsflag = '0'
                            this.InputData.createOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.InputData.createUserId = sessionStorage('userId').getObject('userId').userId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                // this.uploadFile();
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        } else {
                            let url = Api.updateEnvProFacilities;
                            this.InputData.updateUserId = sessionStorage('userId').getObject('userId').userId
                            this.InputData.updateOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                // this.uploadFile();
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        }
                    } else {
                        this.$Message.error('失败!');
                    }
                })

            },

            deleteData(row) {
                let url = Api.deleteEnvProFacilities + '/' + row.envId;
                this.$http.delete(url).then((res) => {
                    this.$Message.success('成功');
                    this.query()
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            addInfo() {
                this.add = true;
                this.InputData = {
                    sewageDisposalNum:0,
                    oilSeparatorNum:0,
                    septicTankNum:0,
                    lampblackJNum:0,
                };
                this.model1 = true;
            },
            query() {
                this.loading = true ;
                let orgId = sessionStorage('userId').getObject('userId').orgInfo.parentId;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    orgId:orgId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                let url = Api.queryEnvProFacilities
                this.$http.get(url, {params: data}).then((res) => {
                    console.log(res.data);
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {}
                this.pageModel2.currentPage = 1;
                this.pageModel2.contractorName = ''
            },
            pageChange1(pageNum) {
                this.pageModel2.currentPage = pageNum;
                this.query();
            },
            pageSizeChange1(pageSize) {
                this.pageModel2.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
        },
        watch: {
            "model1": function (qw, er) {
                if (qw && this.model1) {
                    setTimeout(() => {
                        this.$refs.childOrg.setCurrentOrg();
                    }, 150);
                } else {
                    //this.$refs.childOrg.setCurrentOrg();
                    this.$refs.childOrg.resetCurrentOrg();
                }

            },
        },
    }
</script>

<style scoped>
    @import '../../../index.css';
</style>